<template>
	<view class="cu-modal drawer-modal justify-end" :class="isShow?'show':''" @tap="hideModal">
		<view class="cu-dialog basis-lg flex flex-direction" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<scroll-view style="height:100%" scroll-y="true">
				<checkbox-group class="block" @change="currencyAddChange">
					<view class="cu-form-group" style="min-height:80rpx" v-for="item in list" :key="item.currency">
						<view class="title checkbox_title">{{item.name}}/{{item.currency}}</view>
						<checkbox :class="item.checked?'checked':''" :checked="item.checked?true:false" :value="item.currency"></checkbox>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {initCurrency} from "../utils/config";
	import {getStorage, setStorage} from "../utils/storage_util";
	let changeList = initCurrency;
	export default {
		
		data() {
			return {
				CustomBar: this.CustomBar,
				isShow: false,
				list:[]
			};
		},
		onReady() {
			this.updateCheckBox();
		},
		
		
		methods:{
			updateCheckBox() {
				let initCurrencyData = getStorage("userCurrencyConfig");
				if (!initCurrencyData) {
					initCurrencyData = initCurrency;
				}
				changeList = initCurrencyData;
				if (this.currencyAllList && this.currencyAllList.length > 0) {
					let tempList =[];
					this.currencyAllList.forEach((item) => {
						tempList.push({
							currency: item.currency,
							name: item.name,
							checked: initCurrencyData.indexOf(item.currency) != -1 ? true : false
						})
					})
					this.list = tempList;
				}
			},
			showModal() {
				this.updateCheckBox();
				this.isShow = true;
				this.eventBus.$emit("dlgChange", "show");
			},
			
			hideModal() {
				setStorage("userCurrencyConfig", changeList);
				this.isShow = false;
				this.eventBus.$emit("dlgChange", "addCurrencyHide");
			},
			
			currencyAddChange(e) {
				changeList = e.detail.value;
			}
		}
	}
</script>

<style>
.checkbox_title{
	white-space: nowrap;
	text-align:left!important;
	padding-right:0!important;
}
</style>
